<template>

  <el-container>
    <el-aside width="200px">
      <el-menu :default-active="curPath" :default-openeds="['1', '2']" active-text-color="#357ee0"
        background-color="#2d3a4b" class="el-menu-vertical-demo" text-color="#fff" router>
        <el-sub-menu index="1">
          <template #title>
            <el-icon>
              <i class="iconfont icon-shouye"></i>
            </el-icon>
            <span>后台首页</span>
          </template>
          <el-menu-item index="/htgl/sjfx">
            <template #title>
              <el-icon>
                <i class="iconfont icon-shujuban-zhuzhuang"></i>
              </el-icon>
              <span>数据分析</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/sjksh">
            <template #title>
              <el-icon>
                <i class="iconfont icon-shuju"></i>
              </el-icon>
              <span>大屏数据可视化</span>
            </template>
          </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="2">
          <template #title>
            <el-icon>
              <i class="iconfont icon-dianying"></i>
            </el-icon>
            <span>锋神电影</span>
          </template>
          <el-menu-item index="/fsdy/cinema">
            <template #title>
              <el-icon>
                <i class="iconfont icon-dianyingpiao"></i>
              </el-icon>
              <span>影院管理</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/fsdy/film">
            <template #title>
              <el-icon>
                <i class="iconfont icon-1fangying"></i>
              </el-icon>
              <span>电影管理</span>
            </template></el-menu-item>
          <el-menu-item index="/fsdy/music">
            <template #title>
              <el-icon>
                <i class="iconfont icon-douyin"></i>
              </el-icon>
              <span>音乐管理</span>
            </template></el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon>
              <i class="iconfont icon-dianying"></i>
            </el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item index="/user">
            <template #title>
              <el-icon>
                <i class="iconfont icon-dianyingpiao"></i>
              </el-icon>
              <span>用户列表</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/user/create">
            <template #title>
              <el-icon>
                <i class="iconfont icon-1fangying"></i>
              </el-icon>
              <span>用户创建</span>
            </template></el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <el-icon>
              <i class="iconfont icon-dianying"></i>
            </el-icon>
            <span>角色管理</span>
          </template>
          <el-menu-item index="/role">
            <template #title>
              <el-icon>
                <i class="iconfont icon-dianyingpiao"></i>
              </el-icon>
              <span>角色列表</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/role/create">
            <template #title>
              <el-icon>
                <i class="iconfont icon-1fangying"></i>
              </el-icon>
              <span>角色创建</span>
            </template></el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="5">
          <template #title>
            <el-icon>
              <i class="iconfont icon-dianying"></i>
            </el-icon>
            <span>权限管理</span>
          </template>
          <el-menu-item index="/auth">
            <template #title>
              <el-icon>
                <i class="iconfont icon-dianyingpiao"></i>
              </el-icon>
              <span>权限列表</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/auth/create">
            <template #title>
              <el-icon>
                <i class="iconfont icon-1fangying"></i>
              </el-icon>
              <span>权限创建</span>
            </template></el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <div class="header-nav">
          <span>
            <i class="iconfont" @click="isExpand = !isExpand"
              :class="isExpand ? 'icon-list_left' : 'icon-list_right'"></i>
          </span>
          <div class="nav">
            <Navgation />
          </div>
        </div>
        <el-tabs v-model="curPath" class="demo-tabs" closable @tab-remove="removeTab">
          <el-tab-pane v-for="item in arr" :key="item.path" :label="item.label" :name="item.path"></el-tab-pane>
        </el-tabs>
      </el-header>
      <el-watermark :content="['蔡徐坤', '鸡你太美']">
        <el-main>
          <router-view />
        </el-main>
      </el-watermark>
      <el-footer>
        <el-text>
          2025 © MILUO 前端扛把子@米洛 🔥 👊🏻👊🏻👊🏻
        </el-text>
      </el-footer>
    </el-container>
  </el-container>

</template>


<script setup>
import Navgation from '@/components/common/Navgation.vue'
import { useLoading } from '@/hook/useLoading'
import { useTabStore } from '@/stores/tab'
import { storeToRefs } from 'pinia'
import { onBeforeMount, onMounted, ref } from 'vue'

const tabStore = useTabStore()
const { arr, curPath } = storeToRefs(tabStore)
const { removeTab } = tabStore
// console.log('cur' + curPath.value)
const isExpand = ref(true)
const { show, hide } = useLoading()
onBeforeMount(() => {
  show()
})
onMounted(() => {

  hide()
})
</script>

<style scoped lang="scss">
.el-container {
  height: 100vh;
  width: 100vw;
}

.el-aside {
  background-color: #2d3a4b;
}


.el-main {
  background-color: #f0f2f5;
  z-index: 100;
  height: calc(100vh - 80px - 40px);
}

.el-footer {
  background-color: #ffffff;
  height: 40px;
  display: flex;
  justify-content: center;
}

.el-menu {
  border: none;
}

.el-header {
  height: 80px;
  padding: 0;

  ::v-deep(.el-tabs) {
    padding: 0 20px;
  }
}

.header-nav {
  display: flex;
  height: 40px;
  align-items: center;
  gap: 10px;

  >span {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;

    &:hover {
      background-color: #f0f0f0;
    }
  }

}
</style>